@include('common.header');
<style type="text/css" >

	.category{
		width:350px;
		height:auto;
		float:left;
		margin-left:2%;
		border-radius:5px;
		padding-bottom:30px;
	}
	.sku{
		width:350px;
		height:95px;
		margin-top:15px;
		margin-left:20px;
		float:left;
	}
	img{
		width:130px;
	}
	body{
		background:#F08080; 
		background:#66CDAA; 
		background:#7CCD7C; 
		background:#CDAF95; 
	}
	.bmbox
	{
		width:130px; 
		height:87px;
		background:#F5F5F5; 
		color:#FF0000;
		position:absolute; 
		margin-top:-87px;
		display:block;
		font:30px/20px "宋体"; 
		font-weight:bold;
		text-align:center;
		padding-top:35px;
		filter:alpha(Opacity=80);-moz-opacity:0.6;opacity: 0.6;

	}
	.san i{
		display: inline-block;
		border-width:0 8px 8px;
		border-style:solid;
		border-color:transparent transparent #bf1e2d;
		width: 0;
		height: 0;
		position: absolute;
		top: 0px;
		left: 175px;
	}
	.san i span{
		display: inline-block;
		border-width:0 8px 8px;
		border-style:solid;
		border-color:transparent transparent #fff;
		width: 0;
		height: 0;
		position: absolute;
		top: 1px;
		left: -8px;
		z-index: 2;
	}
	
	
	.cart{
		display: block;
		width: 370px;
		height: auto;
		max-height:420px ;
		position: fixed;
		overflow-y:scroll;  
		overflow-x:hidden; 
		top: 120px;
		left: 67%;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 5px 0;
		font-size: 13px;
		background: #fff;
		z-index: 22;
	}
	.cart .list{
		float:left;
		width: 92%;
		height: auto;
		margin-left:15px;
		margin-top:9px;
		color: #fff;
		line-height: 30px;
	}
	
	

	
</style>

<script type="text/javascript" >
	
	
	// 查询vip的余额 
	function ask()
	{
		// 会员手机号码
		var phone = $("#ask").val();
		if( phone=='' )
		{
			// 隐藏窗口
			$("#result").html(''); 
			$("#result").css('display','none');
			return false;
		}
		$("#result").css('display','block');
		// vip价格
		var vip_price = $("#vip").html();
		if( vip_price<1 )
		{
			// 查询窗口隐藏
			// $("#vip_div").css('display','none');
			// $("#result").html("购物车内没有商品"); 
			// return false;
		}
		$.ajax({
			 type: "post",
			 url: "{{ url('/vip') }}",
			 data: {
				phone: phone,
				vip_price:vip_price,
				_token: _token
			},
			async: false, // 同步操作
			dataType: "json",
			beforeSend:function()
			{
				// 查询窗口隐藏
				$("#vip_div").css('display','none');
				$("#result").html("正在查询···"); 
			}, 
			success: function(back) 
			{
				if( back['show_info'].indexOf("成功") > 0 )
				{
					// 是会员
					if( back['data']['is_can']>0 )
					{
						// 余额足够
						$("#result").html('可进行交易');
						// 结算按钮正常
						$("#jiesuan").attr('disabled',false);
					}else
					{
						// 余额不足
						$("#result").html('<span style="color:red;">不可支付 差'+back['data']['cha']+'元<span>');
						// 结算按钮失效
						$("#jiesuan").attr('disabled',true);
					}
					// 查询窗口出现
					$("#vip_div").css('display','block');
					$("#yue").html(back['data']['money']);
					return false;
				}
				// 不是会员
				$("#result").html('<span style="color:red;">'+back['show_info']+'<span>');
				// 结算按钮失效
				$("#jiesuan").attr('disabled',true);
			}
		})
	}
	
	
	// 支付方式的判断
	function getType()
	{
		var type = $("input[type='radio']:checked").val();
		switch( type )
		{
			// 散客结算
			case 'price':
				// 按钮正常 散客可以直接结算
				$("#jiesuan").attr('disabled',false);
				// vip查询窗口 显示结果窗口 隐藏
				$("#vip_search,#result").css('display','none');
			break;
			// 会员结算
			case 'vip':
				// 按钮失效 不能直接结算
				$("#jiesuan").attr('disabled',true);
				// 查询窗口出现 必须先查询一下 显示结果窗口
				$("#vip_search,#result").css('display','block');
				// 执行查询
				ask();
			break;
		}
	}
	
	
	// 订单总价
	function setTotal()
	{
		// 散客 总价初始化0
		var need_to_pay = 0;
		// vip 总价初始化0
		var vip_to_pay = 0;
		// 商品的小计 集合
		var totalObj = $("div[id*='sku_total_']");
		for( var i=0;i<totalObj.length;i++ )
		{
			// 总价 = 小计之和
			need_to_pay += parseFloat( totalObj[i].innerText );
			vip_to_pay += parseFloat( totalObj[i].getAttribute('vip_total') );
		}
		// 保留1位小数
		need_to_pay = need_to_pay.toFixed(1);
		vip_to_pay = vip_to_pay.toFixed(1);
 		// 设置总价 
		var price = document.getElementById('price');
		// 购物车为空的时候 这样写防止代码报错
		if( price!=null )
		{
			price.innerHTML = need_to_pay ;
		}
		// 设置vip总价 
		var vip = document.getElementById('vip');
		// 购物车为空的时候 这样写防止代码报错
		if( vip!=null )
		{
			vip.innerHTML = vip_to_pay ;
		}
		// 设置完总价后
		// 如果选择了vip结算
		var type = $("input[type='radio']:checked").val();
		if( type=='vip' )
		{
			// 查询vip余额 看是否有足够的余额可以结算
			ask();
		}else
		{
			// 隐藏窗口
			$("#result").html(''); 
			$("#result").css('display','none');
		}
		
		
	}
	
	
	// 目的：生成订单
	function order()
	{
		// 有可能隐藏掉 要显示出来
		$("#result").css('display','block');
		// 获取购物车内商品
		var sku_list = $("input[sku]");
		// 结算类型
		var type = $("input[type='radio']:checked").val();
		// 定义订单
		var order_sku = [];
		switch( type )
		{
			// 散客结算
			case 'price':
				// 打包订单商品
				for( i=0;i<sku_list.length;i++ )
				{
					// 商品id
					var sku_id = sku_list[i].getAttribute('sku');
					// 商品名称
					var sku_name = sku_list[i].getAttribute('sku_name');
					// 商品图片
					var sku_pic =  sku_list[i].getAttribute('sku_pic');
					// 售价
					var sku_price = sku_list[i].getAttribute('sku_price');
					// 订单里的商品
					order_sku.unshift( {'sku_id':sku_id,'sku_name':sku_name,'sku_pic':sku_pic,'sku_price':sku_price,'num':sku_list[i].value} );
				}
				// 订单总价
				var price = document.getElementById('price');
				var need_to_pay = price.innerHTML;
				var phone = '';	
			break;
			// 会员结算
			case 'vip':
				// 打包订单商品
				for( i=0;i<sku_list.length;i++ )
				{
					// 商品id
					var sku_id = sku_list[i].getAttribute('sku');
					// 商品名称
					var sku_name = sku_list[i].getAttribute('sku_name');
					// 商品图片
					var sku_pic =  sku_list[i].getAttribute('sku_pic');
					// 会员价
					var sku_price = sku_list[i].getAttribute('sku_vip');
					// 订单里的商品
					order_sku.unshift( {'sku_id':sku_id,'sku_name':sku_name,'sku_pic':sku_pic,'sku_price':sku_price,'num':sku_list[i].value} );
				}	
				// 订单总价 
				var vip = document.getElementById('vip');
				var need_to_pay = vip.innerHTML;
				// 会员手机号
				var phone = $("#ask").val();				
			break;
			default:
				$("#result").html('<span style="color:red;">订单类型错误<span>'); 
				return false;
			break;
		}
		
		if( order_sku=='' )
		{
			$("#result").html('<span style="color:red;">购物车内没有商品<span>'); 
			return false;
		}
		$.ajax({
			 type: "post",
			 url: "{{ url('/orderAdd') }}",
			 data: {
				type:type,
				order_sku:order_sku,
				need_to_pay:need_to_pay,
				phone:phone,
				_token: _token
			},
			async: false, // 同步操作
			dataType: "json",
			beforeSend:function()
			{
				$("#result").html("正在提交订单···"); 
			}, 
			success:function( back ) 
			{
				$("#result").html( back['show_info'] ); 
				// 订单提交成功
				if( back['show_info'].indexOf("成功") > 0 )
				{
					// 重新加载页面
					setTimeout( function(){
						location.href="{{ url('/') }}";
					},1000);
					// setTimeout( function(){
						// $("#result").slideUp(); 
					// },1000);
					// 商品添加按钮可以点击
					// $("button[id*='button_']").attr('disabled',false);
					// 清除购物车
					// $("div[id*='tmp_']").remove();
				}
			}
		})
	}
	
	
	// 加入购物车
	function add( sku,name,pic_url,price,vip )
	{
		<!-- sku块 模板 -->
		var html = "<div class='list' id='tmp_"+sku+"'  >";
			<!-- 图片 -->
			html += "<div style='float:left;width:80px;' >";
				html += "<img style='width:100%;' src='"+pic_url+"' />";
			html += "</div>";
			<!-- 商品名称 -->
			html += "<div style='float:left;width:70%;line-height:20px;margin-left:10px;color:black;font-size:16px;'>"+name+"</div>";
			<!-- 单价 -->
			html += "<div style='float:left;width:45px;margin-left:10px;margin-top:3px;color:black;font-size:16px;' id='price_"+sku+"' vip='"+vip+"' >"+price+"</div>";
			<!-- 数量 -->
			html += "<div style='float:left;width:105px;color:black;' >";
				<!-- - -->
				html += "<button onclick='jian("+sku+");'  class='glyphicon glyphicon-minus' aria-hidden='true' style='float:left;margin-top:10px;background:rgba(0,0,0,0);border:0px solid red;'></button>";
				<!-- 输入框 -->
				html += "<input onblur='sign("+sku+");' sku='"+sku+"'  sku_name='"+name+"' sku_pic='"+pic_url+"' sku_price='"+price+"' sku_vip='"+vip+"'  style='float:left;width:43px;text-align:center;' class='form-control'  type='text' value='1' />";
				<!-- + -->
				html += "<button onclick='jia("+sku+");' class='glyphicon glyphicon-plus' aria-hidden='true' style='float:left;margin-top:10px;background:rgba(0,0,0,0);border:0px solid red;'></button>";
			html += "</div>";
			<!-- 小计 -->
			html += "<div style='float:left;width:45px;margin-top:3px;color:black;font-size:16px;' id='sku_total_"+sku+"' vip_total='"+vip+"' >"+price+"</div>";
			<!-- 删除 -->
			html += "<div style='float:left;width:20px;margin-left:15px;margin-top:5px;' >";
				html += "<a onclick='del("+sku+");' style='cursor:pointer;'>";
					html += "<span class='glyphicon glyphicon-trash'></span>";
				html += "</a>";
			html += "</div>";
		html += "</div>";
		
		// 1. 放入到购物车里
		$("#cart").after(html);
		// 2. 已经加入的不允许再加入
		$("#button_"+sku).attr('disabled',true);
		// 3. 设置 订单总价
		setTotal();
		
	}
	
	
	// 加 减 输入
	function common( sku,num )
	{
		// 1. 设置 购买数量
		$("input[sku="+sku+"]").val( num );
		// sku vip
		var vip = parseFloat( $("#price_"+sku).attr('vip') );
		// 2. vip 商品小计
		var vip_total = num*vip;
		
		// sku 标价
		var price = parseFloat( $("#price_"+sku).html() );
		// 2. 标价 商品小计
		var price_total = num*price;
		
		$("#sku_total_"+sku).attr('vip_total',vip_total);
		$("#sku_total_"+sku).html("<b>"+price_total.toFixed(1)+"</b>");
		
		// 3. 设置 订单总价
		setTotal();
	}
	
	
	// 目的：增加购买数量 并重新计算价格
	// 参数：sku
	function jia( sku )
	{
		// 获取该商品输入框内 的数量
		var num = parseInt( $("input[sku="+sku+"]").val() );
		// 加1
		num++;
		common( sku,num );
	}
	
	
	// 目的：减少购买数量 并重新计算价格
	// 参数：sku
	function jian( sku )
	{
		// 获取该商品输入框内 的数量
		var num = parseInt( $("input[sku="+sku+"]").val() );
		// 减1
		num--;
		if( num<1 )
		{
			return false;
		}
		common( sku,num );
	}
	
	
	// 目的：输入购买数量 并重新计算价格
	// 参数：sku
	function sign( sku )
	{
		// 获取该商品输入框内 的数量
		var num = parseInt( $("input[sku="+sku+"]").val() );
		// 不是数字
		if( isNaN(num) )
		{
			num = 1;
		}
		// 浮点数 转整
		var num = parseInt( num );
		if( num<1 )
		{
			num = 1;
		}
		common( sku,num );
	}
	
	
	// 目的：购物车里 删除商品
	// 参数：sku
	function del( sku )
	{
		var tmp = document.getElementById("tmp_"+sku);
		// 移除
		tmp.remove();
		// 重新能够添加
		$("#button_"+sku).attr('disabled',false);
		// 重新计算总价
		setTotal();
	}
	
	
	
	
	$(function(){
		getType();
		// 商品添加按钮可以点击
		$("button[id*='button_']").attr('disabled',false);
	})
	
</script>	


<div style="position:fixed;top:60px;left:76%;width:130px;height:50px;background:red;color:white;text-align:center;padding-top:10px;font-size:18px;cursor:pointer;border-radius:360px;" >
	购物车
</div>
<!-- 小三角 -->
<div class="san" style="position:fixed;top:110px;left:67%;border:1px solid red;" >
	<i><span></span></i>
</div>
<div class="cart">
	<!-- sku块 模板 -->
	<div class="list" id="cart" >
	</div>
	
	<!-- 结算信息 -->
	<div style="float:left;width:100%;margin-top:20px;margin-bottom:10px;height:auto;" >
		
		<div style="float:left;width:200px;height:auto;margin-left:35px;margin-top:10px;cursor:pointer;">
			
			<!-- 方式一 -->
			<div style="float:left;width:80px;font-size:15px;" >
				<input type="radio" name="type" value='price' onchange="getType();" checked />&nbsp;原价：
			</div>
			<div id="price" style="float:left;width:115px;font-size:17px;" >0</div>
			
			<!-- 方式二 -->
			<div style="float:left;width:80px;font-size:15px;color:red;margin-top:5px;" >
				<input type="radio" name="type" value='vip' onchange="getType();" />&nbsp;vip &nbsp;&nbsp;：
			</div>
			<div id="vip" style="float:left;width:115px;font-size:17px;margin-top:5px;" >0</div>
			
			<!-- vip查询窗口 -->
			<div style="float:left;width:100%;margin-top:5px;" id="vip_search" >
				<input type='text' class='form-control' style='width:150px;' id="ask" onblur="ask();" placeholder="会员手机号码查询" />
				<div style="float:left;width:200px;height:20px;margin-top:10px;display:none;" id="vip_div" >
					<div style='float:left;font-size:17px;width:60px;'>余额：</div>
					<div style='float:left;font-size:17px;width:80px;' id='yue' ></div>
				</div>
			</div>
			<div style='float:left;color:green;font-size:17px;width:200px;margin-top:10px;' id="result" ></div>
			<!-- <div style="float:left;width:140px;" >优惠：<span id="coupon" >0</span></div> -->
		</div>
		
		<button type="button" class="btn btn-success" style="float:left;border:0px solid red;width:90px;height:41px;margin-right:20px;margin-top:15px;border-radius:5px;background:red;color:white;text-align:center;padding-top:5px;font-size:18px;" onclick="order();" id="jiesuan" >结算</button>
	</div>

</div>


<div style="float:left;width:70%;margin-left:5%;margin-top:80px;margin-bottom:300px;" >

<!-- 豆浆 -->
@forelse( $skus as $key => $sku_array )
	<div class="category" >
		<div style="text-align:center;" >
			<h2>{{ $sku_array['name'] }}</h2>
		</div>
		@forelse( $sku_array['data'] as $ke=> $sku )
			<div class="sku" >
				<!-- 图片 -->
				<div style="width:130px;float:left;" >
					<img src="{{ $sku->pic_url }}" />
					@if( $sku->is_sold_out==2 )
					<div class="bmbox"  >
						已售罄
					</div>
					@else
					@endif
				</div>
				<!-- 商品名字 -->
				<div style="float:left;margin-left:10px;width:90px;height:35px;font-size:18px;color:#CD0000;" >
					{{ $sku->name }} 
				</div>
				<!-- 加入按钮 -->
				<div style="float:left;width:80px;height:35px;font-size:18px;color:#CD0000;text-align:right;" >
					@if( $sku->is_sold_out==2 )
						<button type="button" class="btn btn-success" disabled >加入</button>
					@else
						<button onclick="add( '{{ $sku->id }}','{{ $sku->name }}','{{ $sku->pic_url }}','{{ $sku->price }}','{{ $sku->vip }}' );" type="button" class="btn btn-success" id="button_{{ $sku->id }}" >加入</button>
					@endif
					
				</div>
				<!-- 价格 -->
				<div style="float:left;margin-left:10px;width:155px;height:45px;margin-top:5px;font-size:16px;" >
					${{ $sku->price }}
					<br/>
					<span style="color:#EE2C2C;font-size:13px;" >会员价：</span>${{ $sku->vip }}
				</div>
			</div>
		@empty
		@endforelse
	</div>
@empty
@endforelse

</div>


@extends('common.footer')


